<template>
  <!-- <div class="title">图纸信息汇总</div> -->
  <div style="display: flex; width: 100%; height: 100%">
    <div class="wrapper1" style="margin-right: 20px">
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel key="1" header="图纸备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="完工备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="补领料备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="4" header="检验备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="5" header="委外备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="6" header="退货备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div class="wrapper1">
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel key="7" header="加工过程备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="8" header="机床完工备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="9" header="调试备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="10" header="首检备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="11" header="过程检备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="12" header="编程反馈检备注">
          <p>{{ text }}</p>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';

  export default defineComponent({
    setup() {
      const text = `无备注无备注无备注无备注无备注无备注无备注无备注无备注无备注无备注无备注无备注无备注无备注`;
      const activeKey = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']);

      watch(activeKey, (val) => {
        console.log(val);
      });
      return {
        text,
        activeKey,
      };
    },
  });
</script>
<style>
  /* .title {
    font-size: large;
  } */

  .wrapper1 {
    flex: 1;
  }
  .ant-collapse-header {
    font-weight: bolder;
  }
  .ant-collapse-item {
    margin-top: 10px;
  }
</style>
